<script setup>
import { CaretBottom, CaretTop } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores'
import { ElTable } from 'element-plus'
const router = useRouter()

import { ref } from 'vue'
import { storeToRefs } from 'pinia'
const isChange = ref(true)
const checked1 = ref('')
const change = () => {
  isChange.value = !isChange.value
}

//拿到教师数据
const not = useAppStore()
const { tableData } = storeToRefs(not)
const { getNotice } = not
getNotice()

//实现搜索功能
const input2 = ref('')
const search = () => {
  console.log(input2.value)
  tableData.value = tableData.value.filter((item) => {
    return item.title.includes(input2.value)
  })
  console.log(tableData.value)
}

//鼠标离开时就实现数据恢复
//当清空时将数据还原
const clear = () => {
  if (input.value == '') {
    ListData()
  }
}
</script>
<template>
  <div class="my-inbox">
    <el-button class="w-file">新建文件夹</el-button>
    <div class="el-dropdown">
      <el-dropdown>
        <span class="el-dropdown-link" @mouseover="change()">
          全部
          <el-icon class="el-icon--right">
            <CaretBottom v-if="isChange"></CaretBottom>
            <CaretTop v-else></CaretTop>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>全部</el-dropdown-item>
            <el-dropdown-item>通知</el-dropdown-item>
            <el-dropdown-item>未读</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <input
        v-model="input2"
        class="w-50"
        placeholder="搜索"
        @mouseleave="clear()"
        @keyup.enter="search()"
      />
    </div>
    <div class="my-main">
      <div class="my-line"></div>

      <div class="common-layout">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="100" />
          <el-table-column label="teacherId" width="200">
            <template #default="scope">{{ scope.row.teacherId }}</template>
          </el-table-column>
          <el-table-column property="netAdress" label="netAdress" width="300" />
          <!-- <el-table-column property="title" label="title" width="240" show-overflow-tooltip /> -->
          <el-table-column property="title" label="title" />
          <el-table-column>
            <template #default="scope">
              <a :href="scope.row.netAdress" target="_blank" style="text-decoration: none">查看 </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.my-inbox {
  background-color: #fff;
  height: 100%;
  width: 100%;
  float: right;
  .w-file {
    height: 2.5rem;
    width: 9.0625rem;
    margin-left: 8.125rem;
    margin-top: 0.625rem;
    border-radius: 1.5625rem;
    border: 0.0625rem solid #7eace9;
    color: rgb(0, 149, 255);
    cursor: pointer;
  }
}
.el-dropdown {
  float: right;
}
.el-dropdown-link {
  cursor: pointer;
  color: #7eace9;
  display: flex;
  align-items: center;

  float: right;
  display: flex;
  align-items: center;
  margin-top: -0.9375rem;
  .el-icon--right {
    color: hsla(0, 0%, 85%, 0.858);
    margin-top: 0.1875rem;
  }
}
.w-50 {
  //   margin-right: 30px;
  width: 15.3125rem;
  height: 2.8125rem;
  margin: 0.625rem;
  border-radius: 1.5625rem;
  border: 0.0625rem solid #d9d9d9;
  margin-top: 0.375rem;
}
.w-50::-webkit-input-placeholder {
  margin-right: 1.875rem;
  font-size: 1.0625rem;
  color: #d9d9d9;
  padding-left: 0.9375rem;
}
.my-line {
  background-color: #f5f6f7c9;
  height: 2.5rem;
  width: 100%;
  margin-top: 0.625rem;
}
.common-layout {
  display: flex;
  align-items: center;
}
.common-layout:hover {
  color: cornflowerblue;
  background-color: #f0f6ff;
  .common-span:hover {
    color: cornflowerblue;
  }
}
</style>
